<template>
  <div id="_nextTaskUserDivId" class="ui-widget-content" >
    <table class="table" cellpadding="0" cellspacing="0">
      <tbody>
      <tr>
        <td>
          <table class="table2" cellpadding="0" cellspacing="1">
            <tbody>
            <tr class="contitle">
              <td colspan="4">
                <b class="tdb">{{bpmcoreI18n.finishTaskTitle}}</b>
              </td>
            </tr>
            <tr id="_task_comment_tr">
              <td class="blockTableLeft">{{bpmcoreI18n.comments}}</td>
              <td class="blockTableRight" colspan="3">
                <!--<textarea class="textarea" id="_submitComments"-->
                <!--onkeyup="resourceUtil.validInputLength(this,300,'_submitRemnant')"-->
                <!--v-model="comments"></textarea>-->
                <textarea class="textarea" id="_submitComments" @click="commentsClick" @blur="commentsBlur"
                          maxlength="300" v-model="displayComments"></textarea>
                <span class="" style="text-align:right;padding-right:5px">
                  <!--<div color="blue" id="_submitRemnant">({{showInputLength}}/300)</div>-->
                  <font color="blue" id="_submitRemnant">({{showInputLength}}/300)</font>
                  <div class="clear"></div>
                </span>
              </td>
            </tr>
            <tr>
              <td class="blockTableLeft" height="30">{{bpmcoreI18n.finishTaskNextAct}}</td>
              <td class="blockTableRight" id="_nextActivityName">{{showActivityName}}</td>
              <td class="blockTableLeft">{{bpmcoreI18n.finishTaskType}}</td>
              <td class="blockTableRight" id="_nextApprovalType">{{approvalTypeEnum[target.nextTaskType]}}</td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table style="background-color: rgb(227, 227, 227);" width="100%" cellpadding="0" cellspacing="1">
            <tbody>
            <tr class="contitle">
              <td style="width:53px; text-align:center; padding-left:0px;"></td>
              <td style="width:210px; text-align:center; font-weight:bold;">{{bpmcoreI18n.finishNextUsers}}</td>
              <td style="width:670px; text-align:center; font-weight:bold;">{{bpmcoreI18n.finishNextDepts}}</td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <div id="_nextUsersTableDiv">
            <table id="_nextUsersTable" style="background-color: rgb(227, 227, 227);" width="100%" cellpadding="0"
                   cellspacing="1">
              <tbody>
              <tr class="contitle" style="display:none">
                <td style="width:53px; text-align:center; font-weight:bold;"></td>
                <td style="width:210px; text-align:center; font-weight:bold;">{{bpmcoreI18n.finishNextUsers}}</td>
                <td style="width:670px; text-align:center; font-weight:bold;">{{bpmcoreI18n.finishNextDepts}}</td>
              <tr bgcolor="#EFF3F6" ext="userLine" v-for="(val,i) in target.nextUsers" :key="i">
                <td v-if= "approvalType.approvalTypeCompete === target.nextTaskType
                        || approvalType.approvalTypeMulti === target.nextTaskType"
                      style="width:53px; text-align:center; padding-left:0px;">{{i+1}}</td>
                <td v-if= "approvalType.approvalTypeMultiSelect=== target.nextTaskType"
                    style="width:53px; text-align:center; padding-left:0px;">
                  <input type="checkbox"  name="boxSelectedUser"  v-model="val.checkboxFlag"/></td>
                <td v-if= "approvalType.approvalTypeSingle === target.nextTaskType"
                    style="width:53px; text-align:center; padding-left:0px;">
                  <input type="radio" name="radioSelectedUser"
                         v-model="targetUsers[0]"
                         :value="val.userId"></td>
                <!--:checked="i===0"-->
                <td style="width:210px;text-align:left;margin-left: 10px;">{{val.displayName}}</td>
                <td style="width:670px;text-align:left;margin-left: 10px;">{{val.deptName}}</td>
              </tr>
              </tbody>
            </table>
          </div>
          <table class="table2" cellpadding="0" cellspacing="1">
            <tbody>
            <tr class="bottomBtns">
              <td colspan="3"><input type="button" id="completeStepOKBtn" data-ext="okBtn" :value="bpmcoreI18n.btnOk"
                                     v-show="okBtnShow"
                                     @click="completeStepOKBtnClicked">&nbsp;&nbsp;<input
                type="button" :value="bpmcoreI18n.btnCancel" @click="completeStepCancelBtnClicked"></td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'

export default {
  name: 'bpmDSubmitdialog',
  data () {
    return {
      okBtnShow: true
    }
  },
  computed: {
    ...mapState(['bpmcoreI18n', 'bpdUri', 'tsId', 'pageTypeEnum', 'targetUsers',
      'target', 'bizData', 'comments', 'lang', 'approvalType', 'approvalTypeEnum',
      'isSubmitVerify', 'isStartProc', 'completeTaskType', 'userId', 'isFlowDialogVisible']),
    showInputLength: function () {
      return this.comments.length + ''
    },
    // 审批意见
    displayComments: {
      get () {
        return this.comments
      },
      set (value) {
        this.setComments(value)
      }
    },
    // 展示下一环节名称
    showActivityName: function () {
      if (this.lang === 'zh') {
        return this.target.nextActivities[0].activityName.substr(0, this.target.nextActivities[0].activityName.indexOf('@'))
      } else {
        return this.target.nextActivities[0].activityName.substr(this.target.nextActivities[0].activityName.indexOf('@') + 1)
      }
    }
  },
  props: {
  },

  methods: {
    ...mapActions(['setComments', 'setIsConfirmVerify', 'setIsSubmitVerify', 'startProcess', 'setIsStartProc', 'setIsFlowDialogVisible']),

    completeStepOKBtnClicked () {
      this.okBtnShow = false
      this.$store.state.totalShadeShow = true
      setTimeout(() => {
        this.setIsSubmitVerify(false)
        console.log('弹框必须选人校验开始 ->')
        // 如果是可选多人签核需要更新数据中心targetUsers，如果存在targetUsers（可选多人和单人签核）则需要校验不为空
        console.log('this.targetUsers:', this.targetUsers)
        if (this.approvalType.approvalTypeMultiSelect === this.target.nextTaskType) {
          this.updateTargetUsers({me: this})
        }
        if ((this.approvalType.approvalTypeMultiSelect === this.target.nextTaskType ||
          this.approvalType.approvalTypeSingle === this.target.nextTaskType) &&
          this.targetUsers.length < 1) {
          this.alert(this.bpmcoreI18n.textFinishTask)
          this.okBtnShow = true
          this.$store.state.totalShadeShow = true
          return
        }
        console.log('弹框必须选人校验完成 ->')
        this.$emit('completeStepOKBtnClicked')
      }, 100)
    },
    completeStepCancelBtnClicked () {
      this.okBtnShow = true
      // 点击取消，隐藏dialog,校验位置为false，防止首次成功后续失败的情况
      this.setIsFlowDialogVisible(false)
      this.setIsSubmitVerify(false)
      this.setIsConfirmVerify(false)
    },
    updateTargetUsers (obj) {
      let targetUsers = []
      obj.me.commit('SetTargetUsers', targetUsers)
      console.log('this.targetUsers length:', this.targetUsers.length)
      if (this.approvalType.approvalTypeMultiSelect === this.target.nextTaskType) {
        for (var j = 0; j < this.target.nextUsers.length; j++) {
          let nextUser = this.target.nextUsers[j]
          if (nextUser && nextUser.checkboxFlag) {
            targetUsers[targetUsers.length] = nextUser.userId
          }
        }
        console.log('this.targetUsers length:', this.targetUsers.length)
        obj.me.commit('SetTargetUsers', targetUsers)
      }
    },
    commentsClick () {
      console.log('comments clicked before>>>>>>>>>>>>', this.comments)
      if (this.comments === '同意' || this.comments.toUpperCase() === 'OK' || this.comments === '同意@OK') {
        this.setComments('')
      }
      console.log('comments clicked after>>>>>>>>>>>>', this.comments)
    },
    commentsBlur () {
      console.log('comments blur before>>>>>>>>>>>>', this.comments)
      if (this.comments === '') {
        if (this.lang === 'zh') {
          this.setComments('同意')
        } else {
          this.setComments('OK')
        }
      }
      console.log('comments blur after>>>>>>>>>>>>', this.comments)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .ui-widget-content {
    width: 882px;
    min-height: 180px;
    border: 2px solid #777777;
  }
  .table {
    overflow-y:auto;
    width: 100%;
    border-color: grey;
    border-collapse: inherit;
    background-color:#FFFFFF;
  }
  .table2 {
    background-color: rgb(227, 227, 227);
    width: 100%;
  }
  .tdb {
    font-size: 12px;
    background: url(/static/images/contentBg.png) no-repeat -192px -97px;
    padding-left: 22px;
    color: #222;
    line-height: 24px;
    margin-left: 12px;
    float: left;
    width: 100%;
  }
  .textarea {
    width:690px;
    height:30px;
    margin-top:4px;
    margin-bottom:4px;
  }
  .contitle {
    width: 100%;
    text-align: left;
    background: url(/static/images/contentBg.png) repeat-x 0 -363px;
    height: 24px;
  }
  .blockTableLeft {
    background-color: #F4F4F4;
    text-align: center;
    width: 113px;
  }
  .blockTableRight {
    background-color: #EFF3F6;
    padding-left: 8px;
    width: 317px;
  }
  .bottomBtns {
    background-color: #EEEEEE;
    border-top: 1px solid #FFFFFF;
    height:26px;
    line-height:26px;
    text-align: center;
  }
</style>
